<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		canvas{
			border: 1px solid #333;
		}
	</style>
</head>
<body>
	<canvas width="600" height="400" id="canvas"></canvas>
	<script type="text/javascript">
		//相当于拿到一张纸
		var canvas=document.getElementById("canvas");
		//获取画笔
		var ctx=canvas.getContext("2d");

		//创建渐变色(指定方向，指定渐变的颜色)
		var linearGradient=ctx.createLinearGradient(0,0,200,200)
		var linearGradient=ctx.createLinearGradient(0,0,0,200)
		linearGradient.addColorStop(0,"red")
		linearGradient.addColorStop(0.5,"green")
		linearGradient.addColorStop(1,"yellow")

		ctx.fillStyle=linearGradient;
		ctx.fillRect(0,0,200,200)

		//径向渐变
		var radialGradient=ctx.createRadialGradient(250,200,0,300,200,100)
		radialGradient.addColorStop(0,"red")
		radialGradient.addColorStop(1,"yellow")

		ctx.fillStyle=radialGradient;
		ctx.arc(300,200,100,0,Math.PI*2,false)
		ctx.fill()


	
	</script>
</body>
</html>